<template>
	<section>
		<!--列表v-loading="listLoading"-->
		<el-table border :data="tableDatas" row-key="id" v-loading="listLoading" @selection-change="handleSelectionChange"
				  highlight-current-row style="width: 100%;margin-bottom: 20px;">
			<!--多选框-->
			<!-- <el-table-column type="selection" width="55">
			</el-table-column> -->
			<!-- <el-table-column type="index" width="70" label="序号" fixed="left">
			</el-table-column> -->
			<el-table-column prop="userId" label="操作人ID" width="80" fixed="left">
			</el-table-column>
			<el-table-column prop="userName" label="操作人名称" width="100">
			</el-table-column>
			<el-table-column prop="createTime" label="操作时间" width="170" sortable>
			</el-table-column>
			<el-table-column prop="className" label="操作的类名" width="170" sortable>
			</el-table-column>
			<el-table-column prop="methodName" label="操作的方法名" width="170" sortable>
			</el-table-column>
			<el-table-column prop="methodParams" label="方法参数" width="170" sortable>
			</el-table-column>
			<el-table-column prop="returnValue" label="返回值" width="150" sortable>
			</el-table-column>
			<el-table-column prop="costTime" label="方法执行耗时" width="170" sortable>
			</el-table-column>
			<el-table-column prop="ip" label="操作iP">
			</el-table-column>
			<el-table-column  align="center" fixed="right"  width="200">
				<template slot="header" scope="scope">
					<span >操作</span>&emsp;&emsp;
					<el-button type="primary" @click="addHandler">新增</el-button>
				</template>
				<template scope="scope">
					<el-button size="small" @click="edit(scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="del(scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<!--工具条-->
		<!-- <el-col :span="24" class="toolbar">
			<el-button type="danger" :disabled="this.sels.length===0" @click="delBatch">批量删除</el-button>
			<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="page"
					:page-sizes="[5, 10, 50]"
					:page-size="rows"
					layout="total, sizes, prev, pager, next, jumper"
					:total="totalSize"
					style="float:right;">
			</el-pagination>
		</el-col> -->

		<!--新增界面-->
		<el-dialog :title="title" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" ref="addForm">
				<el-form-item label="操作人ID" prop="userId">
					<el-input v-model="addForm.userId" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="操作人名称" prop="userName">
					<el-input v-model="addForm.userName" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="操作时间" prop="createTime">
					<div class="block">
						<el-date-picker v-model="addForm.createTime" type="date" placeholder="选择日期" format="yyyy/MM/dd"
										value-format="yyyy/MM/dd">
						</el-date-picker>
					</div>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
export default {
	data() {
		return {
			logss: [],// 文章类型的集合
			row: "",
			sels: [], //存储多选记录
			addFormVisible: false,
			addForm: {
				id: '',
				userId: '',
				userName: '',
				createTime: '',
				className: '',
				methodName: '',
				methodParams: '',
				returnValue: '',
				costTime: '',
				ip: '',
			},
			listLoading: false,
			//查询对象
			filters: {
				keyword: ''
			},
			totalSize: 0,//总记录条数
			page: 1,//当前页,要传递到后台的
			rows: 10, //每页显示多少条
			tableDatas: [], //当前页数据
		}
	},
	methods: {




		//提交新增表单数据
		addSubmit() {
			this.title = "新增用户";
			if (this.addForm.parentId) {
				this.addForm.parentId = this.addForm.parentId[this.addForm.parentId.length - 1];
			}


			if (!this.addForm.id) {
				this.$http.post("/logs", this.addForm).then(result => {
					if (result.data.success) {
						this.$message({
							message: result.data.msg,
							type: 'success'
						});
						this.addFormVisible = false;

						this.getTableData();
					} else {
						this.$message({
							message: result.data.msg,
							type: 'error'
						});
					}
				});
			} else {

				this.$http.put("/logs/", this.addForm).then(result => {
					if (result.data.success) {
						this.$message({
							message: result.data.msg,
							type: 'success'
						});
						this.addFormVisible = false;
						this.getTableData();
					} else {
						this.$message({
							message: result.data.msg,
							type: 'error'
						});
					}
				});
			}
		},
		//点击编辑
		edit(row) {
			this.title = "修改"
			this.addFormVisible = true;//显示编辑框
			this.addForm = Object.assign({}, row);//对象赋值
			this.addForm.parentId = this.menuEcho(this.logss, this.addForm.parentId)

		},

		//删除单条数据
		del(row) {

			this.$confirm('确定删除此条数据吗？', '请确认', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				this.$http.delete("/logs/" + row.id).then(result => {
					if (result.data.success) {
						this.$message({
							type: 'success',
							message: result.data.msg
						});
						this.getTableData();

					} else {
						this.$message({
							type: 'error',
							message: result.data.msg
						});
					}
				});
			}).catch(() => {
				this.$message({
					type: 'info',
					message: '已取消操作'
				});
			});
		},
		addHandler() {
			this.addForm = {
			};
			this.addFormVisible = true;
		},
		//选择第几页时触发
		handleCurrentChange(curentPage) {
			this.page = curentPage;
			this.getTableData();
		},
		//选择每页显示记录条数
		handleSizeChange(curentPage) {
			this.rows = curentPage
			this.getTableData();
		},
		handleChange(value) {
			console.log(this.addForm.courseTypeId);
		},
		//获取列表数据
		getTableData() {
			let para = {
				"currentPage": this.page,
				"pageSize": this.rows,
				"keyword": this.filters.keyword
			};
			this.listLoading = true; //显示加载圈
			// //分页查询
			// this.$http.post("/logs/page", para).then(result => {
			// 	this.totalSize = result.data.data.total;
			// 	this.tableDatas = result.data.data.list;
			// 	this.listLoading = false;  //关闭加载圈
			// });
			this.$http.post("/logs/tree").then(result => {
				this.tableDatas = result.data.data;
				this.listLoading = false;  //关闭加载圈
			});
		},

	},
	mounted() {
		this.getTableData();

	}
}

</script>

<style scoped></style>
